<template>
  <el-dialog v-model="show" title="重新设置密码" width="500" class="p-r-10" :draggable="true" :close-on-click-modal="false">
    <el-alert show-icon
              type="info"
              :closable="false"
              class="m-b-15"
              description="密码必须8位或8位以上，并且必须包含大小写字母和数字和特殊字符 ~!@#$%^&*()_+|<>,.?/:;'[]{}" />
    <el-form ref="formRef" :model="form" :rules="rules" status-icon label-width="150px" class="p-r-20">
      <el-form-item label="账号">{{form.account}}</el-form-item>
      <el-form-item label="新密码" prop="password">
        <el-input v-model.trim="form.password" show-password maxlength="50" show-word-limit/>
      </el-form-item>
      <el-form-item label="再输入一遍新密码" prop="comfirmPassword">
        <el-input v-model.trim="form.comfirmPassword" show-password maxlength="50" show-word-limit/>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="hideComp" style="padding: 0 20px" v-if="!loading">
        <span class="iconfont iaiai-close f20 m-r-5"></span>
        取消
      </el-button>
      <el-button type="primary" style="padding: 0 20px" :loading="loading" @click="edit" plain>
        <span class="iconfont iaiai-correct f20 m-r-5" v-if="!loading"></span>
        保存
      </el-button>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import {ref, defineExpose, inject} from "vue"
import {FormInstance, FormRules} from "element-plus"
import {validatePassword} from "@/core/util/validate_util"

const $api = inject('$api')
const $post = inject('$post')
const $toast = inject('$toast')
const show = ref(false)
const loading = ref(false)

interface RuleForm {
  id: string
  account: string
  password: string
  comfirmPassword: string
}

const formRef = ref<FormInstance>()
const form = ref<RuleForm>({
  id: "",
  account: "",
  password: "",
  comfirmPassword: "",
})

const rules = ref<FormRules<RuleForm>>({
  password: [
    { required: true, message: '请输入新密码', trigger: 'blur' },
    { validator:validatePassword, trigger: 'blur' },
  ],
  comfirmPassword: [
    { required: true, message: '请再输入一遍新密码', trigger: 'blur' },
    { validator:validatePassword, trigger: 'blur' },
    { validator:checkConfirmPassword, trigger: 'blur' },
  ],
})

function checkConfirmPassword(rule: any, value: any, callback: any) {
  //检查确认密码
  if (!value) {
    return callback()
  }

  if (value.length < 8 || value !== form.value.password)
    return callback(new Error('两次输入的密码不一致'))

  return callback()
}

function edit(){
  formRef.value.validate((valid, fields) => {
    if (valid) {
      loading.value = true

      $post($api.userEditPassword,form.value).then((res:any)=>{
        loading.value = false
        show.value = false
        formRef.value.resetFields()
        $toast.success('设置成功')
      }).catch((err:any)=>{
        loading.value = false
      })
    }
  })
}

function showComp(id:string){
  form.value.id = id
  form.value.account = ""
  form.value.password = ""
  form.value.comfirmPassword = ""

  $post($api.userDetail,{id}).then((res:any)=>{
    form.value.id = res.data.result.user.id
    form.value.account = res.data.result.user.account

    show.value = true
  })

}
function hideComp(){
  show.value = false
  formRef.value.resetFields()
}

defineExpose({
  showComp,
})
</script>

<style lang="scss" scoped>

</style>
